<!-- 我的视图 -->

<template>
  <div
    ref="view"
    v-bind="markViewProps"
    @mousedown="mouseDown"
    @mouseup="mouseUp"
    @mousemove="mouseMove"
    @mouseleave="mouseLeave"
    @mousewheel="mouseWheel"
    @contextmenu.prevent="CORE.doNothing"
  >
    <ViewBackground @loaded="toLoaded">
      <ViewArea v-for="item in map_list" :key="item.id" :obj="item" />
      <MarkArea :obj="map_one" />
    </ViewBackground>

    <ViewName />

    <ViewRuler />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MapView from '@admin/views/Secure/mixMap/MapView'

// ============================== 导出组件 ============================== //

export default CORE.extend(MapView, {
  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(MapView.components, require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...MapView.computed,

    /**
     * 标记视图的属性
     */
    markViewProps() {
      const { map_visible, viewProps } = this
      const mark = map_visible ? ' Secure-MapView-mark' : ''
      return { class: `${viewProps.class}${mark}` }
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    ...MapView.watch,

    /**
     * 监听列表就绪
     */
    map_readyList(ready) {
      ready && this.map_setOne()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...MapView.methods,

    /**
     * 鼠标按下
     */
    mouseDown({ button, clientX, clientY }) {
      if (this.map_visible) return
      if (button === 0) this.transStart(clientX, clientY)
    },

    /**
     * 鼠标弹起
     */
    mouseUp({ button }) {
      if (this.map_visible) {
        button === 0 && this.toPush() //   左键加入
        button === 1 && this.toPop() //    中键删除
        button === 2 && this.toSubmit() // 右键提交
      } else {
        button === 0 && this.transStop()
        button === 1 && this.initTransScale()
        button === 2 && this.rotateStop()
      }
    },

    /**
     * 鼠标移动
     */
    mouseMove({ clientX, clientY }) {
      if (this.map_visible) {
        this.changePoint(clientX, clientY)
      } else {
        this.inTrans && this.transDoing(clientX, clientY)
        this.inRotate && this.rotateDoing(clientX, clientY)
      }
    },

    /**
     * 鼠标离开
     */
    mouseLeave() {
      if (this.map_visible) Object.assign(this.map_one, { left: '', top: '' })
    },

    /**
     * 改变点位
     */
    changePoint(clientX, clientY) {
      const { map_one: one } = this
      const { map } = this.$children[0].$refs
      const { width, height, top, left } = map.getBoundingClientRect()
      one.left = clientX < left || clientX > left + width ? '' : `${+((clientX - left) * 100 / width).toFixed(4)}`
      one.top = clientY < top || clientY > top + height ? '' : `${+((clientY - top) * 100 / height).toFixed(4)}`
    },

    /**
     * 加入点位
     */
    toPush() {
      const { map_one: one } = this
      if (one.left && one.top) {
        if (one.area.length < 64) one.area.push([one.left, one.top])
        else CORE.MSG.warning('最多 64 个点')
      } else {
        CORE.MSG.warning('点位出界')
      }
    },

    /**
     * 删除点位
     */
    toPop() {
      this.map_one.area.pop()
    },

    /**
     * 提交标记
     */
    toSubmit() {
      const { map_one: one } = this

      if (one.area.length > 2) {
        one.location = one.area.map(([left, top]) => `${left} ${top}`).join()
        this.map_startEdit()
      } else {
        this.map_setOne()
        this.map_closeModal()
      }
    },
  },
})
</script>

<style lang="scss">
@import './index.scss';
</style>
